<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>码上未来</title>
    <link rel="shortcut icon" href="titlelogo.ico">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.js"></script>

</head>

<body>
<div id="container">
    <div id="logo">
        <img src="imgs/logo.png" alt="图片加载失败！">
    </div>
    <div id="title">
        <h3>保护访问</h3>
    </div>
    <div id="login">
        <div id="informatiion">
            请使用DMS账户密码登录
        </div>

        <form>
            <div id="username">
                <div id="account"><img src="imgs/icon_account.png" alt="图片加载失败！"></div>
                <input type="text" id="username1" name="username" placeholder="请输入邮箱或手机号">
            </div>
            <div id="password">
                <div id="icon_psd"><img src="imgs/icon_password.png" alt="图片加载失败！"></div>
                <input type="text" id="password1" name="password" placeholder="请输入密码">
            </div>

            <div id="submit">
                <input type="button" onclick="login()" value="登  录">
            </div>
        </form>

    </div>
</div>

<script>
    function login(){
            $.ajax({
                url: 'http://localhost:8080/user',
                data: {
                    username: document.getElementById("username1").value,
                    password: document.getElementById("password1").value
                },
                type: 'post',
                success: (res) => {
                    console.log(res);
                    // json对象转json字符串
                    let str = JSON.stringify(res);
                    console.log("json对象转json字符串:" + str);
                    //json字符串转json对象
                    let newJson = JSON.parse(str);
                    console.log(newJson);
                    console.log(newJson.name);
                }
            })
    }
</script>

<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!--<script>-->
<!--    new Vue({-->
<!--        el:"#container",-->
<!--        method:{-->

<!--        }-->


<!--    })-->
<!--</script>-->
</body>

</html>